<template>
  <div class="case-examine">
    <checked-title>
      <template #title>
        <div class="title">
          <span></span>
          事件采集数量
          <span></span>
        </div>
      </template>
    </checked-title>
    <div id="echarts" ref="echarts" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
import { HomeDb } from '@/api'
import { VideoListDB } from '@/api'

export default {
  data() {
    return {
      title: '部门',
      option: {
        data: [],
        yData: []
      },
      type: 2
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // 本月案件办理考核TOP榜（街乡）
      VideoListDB.enforcementEffectivenessDB({ type: this.type }).then(res => {
        console.log(res, 'getData')
        this.echarts(res.data)
      })
    },
    tabsClick() {
      this.title = this.type == 2 ? '街办' : '部门'
      this.type = this.type == 2 ? 1 : 2
      this.getData()
    },
    echarts(data) {
      let data1 = []
      let data2 = []
      data.forEach((item) => {
        data1.push(item.name)
        data2.push(item.sum)
      })
      var myChart3 = echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '7%',
          top: '10%',
          bottom: '0%',
          containLabel: true
        },       
         xAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: 16,
            align: 'right',
            rotate: 20,
            margin: 15,
          },
          
          data:data1,
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: 16,
            align: 'right',
            // rotate: 50,
            margin: 15,
          }
        },
        series: [
          {
            type: 'bar',
            barMaxWidth: 24,
            color: '#1E90FF',
            data: data2,
          },
        ],
      };
      myChart3.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.case-examine {
  width: 100%;
  margin-top: 30px;
  padding: 0 10px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      transform: rotate(180deg);
      color: #00fbf0;
      cursor: pointer;
      width: 18px;
      height: auto;
      margin-left: 20px;
      margin-top: 20px;

      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
